<template>
  <div class="relative circle-slide">
    <div class="circle-item">
      <div class="m">
        <img
          class="absolute z-0 img-0"
          :class="`img1-0`"
          :src="getAssetsFile(`1-0.png`)"
        />
      </div>
    </div>
    <div
      class="absolute z-10 flex items-center justify-center circle-pagination"
    >
      <div
        class="circle-dot"
        v-for="(item, index) in items"
        :key="item"
        :class="{ active: item === selectedItem }"
        @click="selectItem(index)"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const getAssetsFile = (url) => {
  return new URL(`../assets/${url}`, import.meta.url)
}

const items = ref([1, 2, 3, 4, 5])
const selectedItem = ref(1)
let currentIndex = 0
let interval
const selectItem = (index) => {
  selectedItem.value = items.value[index]
  currentIndex = index // 更新当前索引为点击的索引
  clearInterval(interval) // 清除之前的定时器
  startInterval() // 重新启动定时器
}
const startInterval = () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % items.value.length
    selectItem(currentIndex)
  }, 4000)
}

onMounted(() => {
  startInterval() // 启动定时器
})

onBeforeUnmount(() => {
  clearInterval(interval) // 清除定时器
})

onDeactivated(() => {
  return () => clearInterval(interval)
})
</script>
<style scoped lang="scss">
.circle-slide {
  height: 740px;
  border: 1px solid #f00;
  .circle-pagination {
    bottom: 0;
    left: 0;
    right: 0;
    height: 53px;
    .circle-dot {
      margin: 0 3px;
      width: 53px;
      height: 53px;
      background: url(../assets/bullet_off.png) no-repeat center;
      &.active {
        background-image: url(../assets/bullet_on.png);
      }
    }
  }
}
</style>
